# CSS Minimizer 插件

import { SourceCode } from 'rspress/theme';

<SourceCode href="https://github.com/web-infra-dev/rsbuild/tree/main/packages/plugin-css-minimizer" />

Rsbuild 默认使用 Rspack 内置的 SWC 来压缩 CSS 代码，你可以通过 CSS Minimizer 插件来自定义 CSS 压缩工具，切换到 [cssnano](https://github.com/cssnano/cssnano) 或其他工具进行 CSS 压缩。

CSS Minimizer 插件内部集成了 [css-minimizer-webpack-plugin](https://github.com/webpack-contrib/css-minimizer-webpack-plugin)。

:::tip 关于 cssnano
[cssnano](https://github.com/cssnano/cssnano) 是一个用于优化和压缩 CSS 文件的工具。它通过删除未使用的规则、合并相同的规则、移除注释和空白符以及转换长度单位等方式来减小 CSS 文件的体积，从而提升网站的加载速度。
:::

## 快速开始

### 安装插件

你可以通过如下的命令安装插件:

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs command="add @rsbuild/plugin-css-minimizer -D" />

### 注册插件

你可以在 `rsbuild.config.ts` 文件中注册插件：

```ts title="rsbuild.config.ts"
import { pluginCssMinimizer } from '@rsbuild/plugin-css-minimizer';

export default {
  plugins: [pluginCssMinimizer()],
};
```

## 选项

### pluginOptions

用于自定义 css-minimizer-webpack-plugin 的选项。

`pluginOptions` 的值会与插件内部的默认选项通过 `Object.assign` 合并，然后透传给 css-minimizer-webpack-plugin 插件。你可以阅读 css-minimizer-webpack-plugin 的 [README 文档](https://github.com/webpack-contrib/css-minimizer-webpack-plugin) 来了解所有可用的选项。

- **类型：** `Object | Function | undefined`
- **默认值：**

```ts
const defaultOptions = {
  minify: CssMinimizerWebpackPlugin.cssnanoMinify,
  minimizerOptions: {
    preset: [
      'default',
      {
        mergeLonghand: false,
      },
    ],
  },
};
```

- **示例一：** 修改 [cssnano](https://github.com/cssnano/cssnano) 的 `preset` 配置。

```js
pluginCssMinimizer({
  pluginOptions: {
    minimizerOptions: {
      preset: require.resolve('cssnano-preset-simple'),
    },
  },
});
```

- **示例二：** 传入一个函数来修改默认选项。

```js
pluginCssMinimizer({
  pluginOptions: (options) => {
    options.minimizerOptions = {
      preset: require.resolve('cssnano-preset-simple'),
    };
  },
});
```

- **示例三：** 切换到其他工具进行 CSS 压缩

```js
import {
  pluginCssMinimizer,
  CssMinimizerWebpackPlugin,
} from '@rsbuild/plugin-css-minimizer';

pluginCssMinimizer({
  pluginOptions: {
    minify: CssMinimizerWebpackPlugin.cleanCssMinify,
    minimizerOptions: {
      level: {
        1: {
          roundingPrecision: "all=3,px=5",
        },
      },
    },
  },
}),
```
